<template>
	<view class="wrapper" :style="bgurl">
		<uni-nav-bar backgroundColor="#fff" left-width="160" left-icon="left" right-icon="cart" @clickLeft="backto">
			<!-- <block slot="left">
				<view>
					<text class="uni-nav-bar-text"></text>
				</view>
			</block> -->
			<!-- <view class="input-view">
								<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
								
							</view> -->
			<block slot="right">
				 
			</block>
		</uni-nav-bar>
		<view >
			<view class="style-section">
				<view class="home__title">最新
				</view>
				<view class="zebra-doc-block">
					<!-- <view v-if="name" class="zebra-doc-block__title">{{ name }}</view> -->
					<view class="zebra-doc-block__card">
						<z-swiper v-model="list" :options="options" ref="zSwiper">
							<z-swiper-item :custom-style="slideCustomStyle" v-for="(item,index) in list" :key="index">
								<albumPreview :custom-style="itemCustomStyle" :item="item" style="width: 100%;"></albumPreview>
							</z-swiper-item>
						</z-swiper>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import data from '../../common/data.js'
	import auth from '../../common/authentication.js'
	import albumPreview from "../../components/album-preview/album-preview.vue"
	const host = getApp().globalData.apiurl;
	export default {
		components: {
			albumPreview
		},
		computed: {
			// swiper() {
			// 	return this.$refs["zSwiper"].swiper
			// }

		},
		data() {
			return {
				slideCustomStyle: {
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center'
				},
				itemCustomStyle: {
					"height": "600rpx",
					"width": "100%",
					"border-radius": "24rpx"
				},
				options: {
					effect: 'fade',
					fadeEffect: {
						crossFade: true
					}
				},
				openList:[],
				list: [],
				path: '',
				background: '',
				name: '',
				card: true,
				bgurl: `background:url(${host}/Image/Background/bgsection.png) top right`
			}
		},
		onLoad(r) {
			if (r) {
				this.path = r.path;
				this.background = r.background;
				this.name = r.name;
				// uni.setStorage({
				// 	key: 'ActiveAlbum',
				// 	data: {
				// 		path: r.path,
				// 		background: r.background,
				// 		title: r.title
				// 	}
				// })
			}
			this.loadDefault().then(res => {
				this.openList = res.data;
				this.slideCurrent();
			});
		},
		onUnload() {
			//uni.$off("sendKind")
		},
		onShow() {
			// let active = uni.getStorageSync("ActiveAlbum");
			// if (active) {
			// 	this.background = active.background;
			// 	this.title = active.title;
			// }
			//console.log(active)
		},
		methods: {
			async loadDefault() {
				let that = this;
				return await new Promise((resolve, reject) => {
					that.$Request.post(`${host}/api/Recent?kind=Theme&top=1000`, {}).then(res => {
						if (res.statusCode != 200) {
							reject(res);
							return;
						}
						resolve(res);
					}).catch(err => {

					})
				})
			},
			slideCurrent() {
				this.$nextTick(() => {
					setTimeout(() => {
						// this.$refs.zSwiper.swiper.slideTo(0, 1000, false);
						let current = this.openList.find(m => m.filePath == this.path);
						let index=this.openList.indexOf(current);
						console.log(this.openList.indexOf(current))
						this.list=this.openList.slice(index)
					}, 50)

				})


			},
			backto(){
				uni.navigateBack();
			},
			//loadDefault() {


			// http.get('http://'+host+url+'?'+query, {
			//     params: {}, /* 会加在url上 */
			//     header: {'Content-Type':'application/x-www-form-urlencoded',Authorization:'Qiniu '+token}, /* 会与全局header合并，如有同名属性，局部覆盖全局 */
			//     dataType: 'json',
			//     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
			//     custom: {}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token

			//     // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
			//     timeout: 60000, 
			//     // #endif
			//     // 返回当前请求的task, options。请勿在此处修改options。非必填
			//     getTask: (task, options) => {

			//          // setTimeout(() => {
			//          //   task.abort()
			//          // }, 500)
			//     },
			//     // 自定义验证器。statusCode必存在。非必填
			//     // validateStatus: function validateStatus(statusCode) {
			//     //    return statusCode >= 200 && statusCode < 300
			//     // },
			//     // forcedJSONParsing: true, // 是否尝试将响应数据json化,默认为true。如果失败则返回原数据
			// }).then(res => {
			// that.list=that.buildGroup(res.data.items);
			// //that.list=data;
			// }).catch(err => {

			// })

			//},
			buildGroup(items) {
				let formatItems = [];
				let groupName = '';
				let arr = [];
				for (var i = 0; i < items.length; i++) {
					if (items[i].fsize == 0) {
						groupName = items[i].key;
					} else {
						let title = items[i].key.substring(items[i].key.lastIndexOf('/') + 1);
						let imgUrl = bind + '/' + items[i].key;
						formatItems.push({
							path: imgUrl,
							text: title
						})
					}
				}
				//arr.push({groupName:groupName,list:formatItems});

				return formatItems;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/common/style/slidemenu.css";

	page {
		height: 100%;
	}

	.wrapper {
		background: linear-gradient(to bottom, rgba(103, 103, 103, 0), #222228);
		width: 100%;
		min-height: 100vh;
		background-size: cover;

	}

	.style-section {
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		padding: 92rpx 3rpx 3rpx;
		background: linear-gradient(to bottom, rgba(103, 103, 103, 0), #222228);
		background-size: cover;
	}

	.zebra-doc-block {
		margin: 60rpx 20rpx;
		padding: 20rpx 1rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background: #e4ebf5;
		box-shadow: 5rpx 10rpx 20rpx #cbd1da, -5rpx -10rpx 20rpx #fdffff;
	}

	.zebra-doc-block__title {
		margin: 0;
		padding: 30rpx;
		color: rgba(69, 90, 100, 0.6);
		font-weight: normal;
		font-size: 28rpx;
		line-height: 32rpx;
		border-bottom: 2rpx solid #f7f8fa;
	}

	.zebra-doc-block__card {
		padding: 30rpx 10rpx;
	}

	.zebra-doc-block__title+.zebra-doc-block__card {
		margin-top: 0;
	}
	
	.home__title,
	.home__desc {
		padding-left: 32rpx;
		font-weight: normal;
		line-height: 42rpx;
		user-select: none;
	}
	
	.home__title {
		margin: 0 0 32rpx;
		font-size: 64rpx;
		color: $home-text;
	}
</style>